<script setup lang="ts">
import { ADD_TYPE_ENUM } from '@/const';
import { useThemeToken } from '@/hooks';
import type { BuildItem } from '@/types';
import clsx from 'clsx';
import { reactive, ref, watchEffect } from 'vue';
import AddBuilding from './add-building.vue';

const token = useThemeToken();

const selectedColor = token.value.colorPrimary;


const emit = defineEmits(['change', 'update']);

const props = defineProps<{
	items: Array<BuildItem>
}>();

const selectedMap = reactive<Record<string, boolean>>({});

const current = ref();

const handleClick = (item: BuildItem) => {
	if (item.ID === current.value) return;
	for (const key of Object.keys(selectedMap)) {
		selectedMap[key] = false;
	}
	selectedMap[item.ID] = true;
	current.value = item.ID;
	emit('change', current.value);
};

watchEffect(() => {
	if (props.items.length && !current.value) {
		current.value = props.items[0].ID;
		selectedMap[current.value] = true;
		emit('change', current.value);
	}
});

</script>

<template>
	<div class="overflow-auto w-[100%]">
		<div class="flex break-all items-center">
			<div v-for="(item) in props.items" :key="item.ID" class="mr20 position-relative">
				<div @click="handleClick(item)" :class="clsx('mt0 font-600 font-size-16', { [`color-selected`]: !!selectedMap[item.ID] })">
					{{ item.Name }}
					<AddBuilding @add="emit('update')" :data="{ id: item.ID, name: item.Name }"
						:type="ADD_TYPE_ENUM.building" v-show="!!selectedMap[item.ID]">
							<span class="i-material-symbols-edit"></span>
					</AddBuilding>
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped lang="less">
.color-selected {
	color: v-bind(selectedColor);
}
</style>
